/**
 * 简单数字动效，从一个数字变为一个数字，支持渲染时format函数和开始数字
 * <div v-countUp="showNum"></div> // 从数字0变化到showNum
 * <div v-countUp:[formatFunction]5="showNum"> 单击复制 </div>  // 从数字5变化到showNum，渲染时使用formatFunction进行运算
 */

// 数值改变动画函数
function magic_number({ start, end, render }) {
  let _count = start;
  const fn = () => {
    if (start >= end) {
      render(end);
      return;
    }
    _count += Math.ceil(Math.random() * (end - _count) * 0.1);
    if (_count >= end) {
      render(end);
      return;
    }
    render(_count);
    requestAnimationFrame(fn);
  };
  fn();
}

export default {
  update(el, binding) {
    const { value, arg, modifiers } = binding;
    let render = (num) => (el.innerText = num);
    if (typeof arg === "function") {
      // format函数
      render = (num) => (el.innerText = arg(num));
    }

    let start = 0;
    const startProp = Object.keys(modifiers)[0];
    if (!isNaN(Number(startProp))) {
      start = Number(startProp);
    }

    magic_number({ start, end: value, render });
  },
};
